import { Component, ViewChild } from '@angular/core';
import { ICellEditorAngularComp } from '@ag-grid-community/angular';
import { dateFormat, getO } from '../../../utils/utils';
import { ApesDatePickerComponent } from '@shared/apes/date-picker/date-picker.component';
import { DisabledTimeFn, DisabledTimePartial } from '@shared/apes/date-picker/standard-types';
import { setHours } from 'date-fns';
// @ts-ignore
import differenceInCalendarDays from "date-fns/difference_in_calendar_days";

@Component({
  selector: 'apes-cell-date',
  template: `
<!--    <apes-date-picker #picker-->
<!--                      (keydown)="onKeyDown($event)"-->
<!--                      (ngModelChange)="onChange($event)"-->
<!--                      [apesShowTime]="showTime"-->
<!--                      [apesDisabledTime]="disabledDateTime"-->
<!--                      [(ngModel)]="inputValue"></apes-date-picker>-->
    <apes-date-picker #picker
                      (keydown)="onKeyDown($event)"
                      (ngModelChange)="onChange($event)"
                      [apesShowTime]="showTime"
                      [(ngModel)]="inputValue"></apes-date-picker>
  `,
  styles: [],
})
export class EditorDateComponent implements ICellEditorAngularComp {
  inputValue: any;
  params: any;
  ctx: any;
  formatType: string = 'yyyy-MM-dd';

  colDef: any;
  today = new Date();
  showTime: any;

  // disabledDateTime: DisabledTimeFn = () => {
  //   return {
  //     apesDisabledHours: () => [1,2,4],
  //     apesDisabledMinutes: () => [55],
  //     apesDisabledSeconds: () => [56],
  //   };
  // }

  @ViewChild('picker', { read: ApesDatePickerComponent, static: false }) picker: ApesDatePickerComponent;

  constructor() {
  }

  agInit(params: any): void {
    this.params = params;
    this.inputValue = params.value;
    if (this.params.hasOwnProperty('colDef')) {
      this.colDef = this.params.colDef;
    } else {
      this.colDef = this.params['column']['colDef'];
    }
    this.getConfig();
  }

  ngAfterViewInit() {
    this.picker.apesOpen = true;
  }

  isPopup(): boolean {
    return false;
  }

  getConfig() {
    if (this.colDef.hasOwnProperty('showTime') && this.colDef.hasOwnProperty('formatType')) {
      this.showTime = getO(this.colDef.showTime);
      this.formatType = this.colDef.formatType;
    }
    // if (this.colDef.hasOwnProperty('disabledDateTime')) {
    //   let disabledHours = this.colDef['disabledHours'] ? JSON.parse(this.colDef['disabledHours']) : [];
    //   let disabledMinutes = this.colDef['disabledMinutes'] ? JSON.parse(this.colDef['disabledMinutes']) : [];
    //   let disabledSeconds = this.colDef['disabledSeconds'] ? JSON.parse(this.colDef['disabledSeconds']) : [];

      // this.disabledDateTime = () => {
      //   return {
      //     apesDisabledHours: () => disabledHours,
      //     apesDisabledMinutes: () => disabledMinutes,
      //     apesDisabledSeconds: () => disabledSeconds,
      //   };
      // };
    // }
  }

  getValue(): any {
    let result;
    if (!this.inputValue) {
      result = '';
      this.params.value = '';
    } else {
      result = this.inputValue;
      this.params.value = this.inputValue;
    }
    return result;
  }

  onKeyDown(event): void {
    let key = event.which || event.keyCode;
    if (key === 38 || key === 40) {
      this.preventDefaultAndPropagation(event);
    } else if (key == 13 || key == 9) { // enter
      // perform some validation on enter - in this example we assume all inputs are mandatory
      // in a proper application you'd probably want to inform the user that an input is blank'
      /**/
      this.inputValue = event.target.value;
      this.params.value = event.target.value;
    }
  }

  onChange(param) {
    this.inputValue = dateFormat(this.formatType, new Date(param));
    this.params.value = this.inputValue;
    this.picker.apesOpen = false;
    this.params.stopEditing(false);
  }

  private preventDefaultAndPropagation(event) {
    event.preventDefault();
    event.stopPropagation();
  }
}
